<!--
 * @Description: 地图
 * @Author: charles
 * @Date: 2021-05-05 23:34:12
 * @LastEditors: 侯瑜
 * @LastEditTime: 2022-01-11 09:46:20
-->
<template>
    <div ref="map_container" style="height:95%">地图</div>
</template>

<script>
import {get} from "../../../utils/request"
import {Map} from "@antv/g2plot"
import {Marker} from "@antv/g2plot"
export default {
    data(){
        return{

        }
    },
    mounted(){
this.initMap();
    },
    methods:{
        initMap(){
            var map = new AMap.Map(this.$refs.map_container, {
            zoom:16,//级别
             rotation: 65,
             pitch: 55,
              turboMode: false,
               showIndoorMap: false,
               defaultCursor: 'pointer',
               showBuildingBlock: false,
               forceVector: true,
            center: [112.583804,37.423954],//中心点坐标
            viewMode:'3D'//使用3D视图
});

 let polygons=[];
      var opts = {
          subdistrict: 0,   //获取边界不需要返回下级行政区
          extensions: 'all',  //返回行政区边界坐标组等具体信息
          level: 'district'  //查询行政级别为 市
      };
      let district = new AMap.DistrictSearch(opts);
      district.setExtensions('all');
      district.search('太原市', function(status, result) {
          map.remove(polygons)//清除上次结果
          polygons = [];
          var bounds = result.districtList[0].boundaries;
          if (bounds) {
              for (var i = 0, l = bounds.length; i < l; i++) {
                  //生成行政区划polygon
                  var polygon = new AMap.Polygon({
                      strokeWeight: 1,
                      path: bounds[i],
                      fillOpacity: 0.1,
                      fillColor: '#80d8ff',
                      strokeColor: '#0091ea'
                  });
                  polygons.push(polygon);
              }
          }
          map.add(polygons)
          map.setFitView(polygons);//视口自适应
      });
      //打点
      let url = "/dashboard/findEngineerDeviceTree"
      get(url).then(resp=>{
          let edTree = resp.data;
          let devices = [];
          edTree.forEach(item=>{
              devices.push(...item.children)
          })
          
          console.log(devices);

          devices.forEach(item=>{
              var icon = new AMap.Icon({
    size: new AMap.Size(400, 500),    // 图标尺寸
    image: '//vdata.amap.com/icons/b18/1/2.png',  // Icon的图像
    imageOffset: new AMap.Pixel(0, -60),  // 图像相对展示区域的偏移量，适于雪碧图等
    imageSize: new AMap.Size(40, 50)   // 根据所设置的大小拉伸或压缩图片
});

               var marker = new AMap.Marker({
    position: item.position,   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
    icon: '//vdata.amap.com/icons/b18/1/2.png',
    title: item.name,
    extData:item
});
marker.on('click',function(){
    let d = this.getExtData();
    alert(d.id+"-"+d.engineer_id);
})
map.add(marker);
          })
      })
        }
    }
}
</script>
